<template>
  <el-dialog :title="title" :width="width"
             :visible.sync="isShowVisible"
             center :close-on-click-modal="false"
             :before-close="() => $emit('close')">
    <el-card v-loading="isLoading">
      <el-form label-width="105px" :model="formData" ref="formData" :rules="rules">
        <el-form-item label="模型名称:" prop="name" id="name">
          <el-input v-model="formData.name"></el-input>
        </el-form-item>
        <el-form-item label="模型描述:" prop="description" id="description">
          <el-input v-model="formData.description"></el-input>
        </el-form-item>
        <el-form-item label="模型键值:" prop="key" id="key">
          <el-input v-model="formData.key"></el-input>
        </el-form-item>
      </el-form>
    </el-card>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="saveFormData">保存</el-button>
      <el-button @click="$emit('close')">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import ModelManageApi from '@/api/workFlow/ModelManageApi'
  export default {
    name: 'modelAddEdit',
    props:{
      width:{
        type:String,
        default:'60vw'
      },
    },
    data(){
      return{
        title:'新增模型',
        isShowVisible:true,
        isLoading:false,
        rules:{
          key: [{required: true, message: '请填写模型键值', tirgger: 'blur'}],
          description: [{required: true, message: '请填写模型描述', tirgger: 'blur'}],
          name: [{required: true, message: '请填写模型名称', tirgger: 'blur'}],
        },
        formData:{},
      }
    },
    methods:{
      saveFormData(){
        this.$refs['formData'].validate((valid, object) => {
          if (valid) {
            const loading = this.$loading({
              lock: true,
              text: '请耐心等待.....',
              spinner: 'el-icon-loading',
              background: 'rgba(0, 0, 0, 0.7)'
            })
            let http = new ModelManageApi()
            http.addItem(this.formData).then(res => {
              loading.close()
              if(res.code === 200){
                this.$message.success('保存成功!')
                this.$emit('close')
              }else{
                this.$message.error('保存失败!')
              }
            }).catch(e => {
              loading.close()
            })
          } else {
            let validArr = []
            Object.keys(object).forEach(function (key) {
              validArr.push(key)
            });
            let validVal = "#" + validArr[0];
            document.querySelector(validVal).scrollIntoView(true);
          }
        })
      },
    },
  }
</script>

<style scoped>

</style>
